<template>
  <div class="flex justify-between items-center">
    <div class="flex-1 text-[14px] text-[#666]">
      页码{{ currentPage }}/{{ totalPage }} 共 {{ total }} 条
    </div>
    <el-select class="!w-[104px] mt-[1px] ml-[10px]" :model-value="pageSize" @change="handleSize">
      <el-option label="15条/页" :value="15"></el-option>
      <el-option label="30条/页" :value="30"></el-option>
      <el-option label="50条/页" :value="50"></el-option>
      <el-option label="100条/页" :value="100"></el-option>
    </el-select>
    <button :disabled="prevDisabled" class="btn ml-[10px]" @click="handlePrev">上一页</button>
    <button :disabled="nextDisabled" class="btn ml-[10px]" @click="handleNext">下一页</button>
    <el-input-number
      class="!w-[60px] mx-[10px]"
      v-model="page"
      placeholder="分页"
      :step="1"
      :min="0"
      :controls="false"
    />
    <el-button type="primary" @click="handlePage">跳转</el-button>
  </div>
</template>
<script setup lang="ts">
import { debounce } from "lodash-es";
const props = withDefaults(
  defineProps<{
    currentPage: number;
    pageSize: number;
    total: number;
  }>(),
  {}
);
const emit = defineEmits(["update:currentPage", "update:pageSize", "current-change"]);
const totalPage = computed(() => Math.ceil(props.total / props.pageSize));
const size = ref(props.pageSize);
const page = ref(props.currentPage);
const prevDisabled = computed(() => props.currentPage == 1 || totalPage.value == 0);
const nextDisabled = computed(() => props.currentPage == totalPage.value || totalPage.value == 0);
watch(
  () => props.pageSize,
  val => {
    size.value = val;
  }
);

watch(
  () => props.currentPage,
  val => {
    page.value = val;
  }
);

const handleSize = debounce(
  (s: number) => {
    size.value = s;
    if (props.currentPage > Math.ceil(props.total / s)) {
      page.value = 1;
      emit("update:currentPage", 1);
    }
    emit("update:pageSize", s);
    nextTick(() => {
      emit("current-change");
    });
  },
  500,
  { leading: true, trailing: false }
);

const handlePage = debounce(
  () => {
    if (page.value == null) return;
    if (totalPage.value <= 1) return;
    emit("update:currentPage", page.value);
    nextTick(() => {
      emit("current-change");
    });
  },
  500,
  { leading: true, trailing: false }
);
const handlePrev = debounce(
  () => {
    if (page.value > 1) {
      page.value--;
      emit("update:currentPage", page.value);
      nextTick(() => {
        emit("current-change");
      });
    }
  },
  500,
  { leading: true, trailing: false }
);
const handleNext = debounce(
  () => {
    if (page.value < totalPage.value) {
      page.value++;
      emit("update:currentPage", page.value);
      nextTick(() => {
        emit("current-change");
      });
    }
  },
  500,
  { leading: true, trailing: false }
);
</script>
<style scoped lang="scss">
.btn {
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: linear-gradient(to bottom, #fff, #eee);
  font-size: 13.5px;
  padding: 0 10px;
  cursor: pointer;
  &:active {
    background: linear-gradient(to top, #fff, #eee);
  }
}
.el-button {
  height: 32px;
}
</style>
